<template>
  <div class="header flex-between">
    <div class="logo_box" @click="goBack()">
      <div class="logo">
        <img src="@/assets/common/logo.png" alt="" srcset="" />
      </div>
      <div class="title">开源综合情报百科</div>
    </div>
    <div class="right flex-center">
      <div
        class="search_inpt"
        style="margin-right: 30px; margin-top: 5px"
        :style="block"
        @mouseleave="hideSearch()"
      >
        <div class="search" style="float: left"></div>
        <input
          type="text"
          style="float: left; border-bottom: 1px solid #fff; height: 20px; color: #fff"
        />
      </div>
      <div class="search" @mouseover="showSearch()" :style="isblock"></div>

      <div class="user-icon"></div>
      <div class="user-name">{{ adminText }}</div>
      <div class="user-time">
        {{ gettime }}
        <!-- 2020/11/1<span>&nbsp;&nbsp;&nbsp;</span>12:00:00 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      block: "",
      isblock: "",
      gettime: "",
      clsTime: null,
      adminText: "访客模式",
    };
  },
  methods: {
    // 时间：
    getTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      this.gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    },
    showSearch() {
      this.block = "display:block";
      this.isblock = "display:none";
    },
    hideSearch() {
      this.block = "display:none";
      this.isblock = "display:block";
    },
    goBack() {
      // 一旦会首页，清空这个缓存：
      if (this.$route.path == "/") {
        localStorage.getKeyword = "";
      }
      sessionStorage.tabId = "";
      this.$router.push("/");
      // this.$router.go(-1);
    },
  },
  created() {
    if (sessionStorage.jumpTF == "OK") {
      this.adminText = "osint";
    } else {
      this.adminText = "访客模式";
    }
  },
  mounted() {
    this.clsTime = setInterval(() => {
      this.getTime();
    }, 1000);
  },
  destroyed() {
    if (this.clsTime) {
      clearInterval(this.clsTime);
    }
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.header {
  height: vh(60);
  min-height: 0.55rem;
  max-height: 0.85rem;
  background-image: url(~@/assets/common/title.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 0 0.2rem;
  color: rgb(255, 255, 255);
  font-size: 12px;
  justify-content: space-between;
  // logo 整合
  .logo_box {
    display: flex;
    justify-content: center;
    margin-left: 24px;
    align-items: center;
    cursor: pointer;
    .logo {
      margin-right: 20px;
      width: 145px;
      height: 23px;
      margin-bottom: 5px;
      // position: relative;
      // left: 50px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      font-weight: 700;
      font-style: normal;
      font-size: 24px;
      letter-spacing: 4px;
      // position: absolute;
      // left: 230px;
      // top: 0.1rem;
    }
  }
  .search {
    width: 20px;
    height: 20px;
    background-image: url(~@/assets/common/icon-search.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-right: 20px;
  }
  .search_inpt {
    display: none;
  }
  .user-icon {
    margin-right: 6px;
    width: 18px;
    height: 22px;
    background-image: url(~@/assets/common/icon-yonghu.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .user-name {
    margin-right: 20px;
  }
}
</style>
